<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-18 11:02:38
 * @LastEditTime: 2023-02-16 18:03:27
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 合同基本信息
 * @Motto: Write the code. Change the world.
-->
<template>
  <div>
    <a-row :gutter="12">
      <a-col :span="24" class="mt-10">
        <a-card size="small" title="基本信息">
          <a-descriptions
            layout="vertical"
            :labelStyle="labelStyle"
            :contentStyle="contentStyle"
            size="small"
            :column="{ xl: 4, md: 2, xs: 1 }"
          >
            <a-descriptions-item label="合同编号">
              <span>{{ detail.contract_number }}</span>
              <a-tooltip>
                <template #title>复制</template>
                <a-button
                  type="link"
                  @click="$utils.copyText(detail.contract_number)"
                >
                  <template #icon>
                    <CopyOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-descriptions-item>
            <a-descriptions-item label="经办人">
              <span class="link" @click="showUserInfo(detail.followup_uid)">
                {{ detail.followup_uname }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="创建人">
              <span class="link" @click="showUserInfo(detail.cuser_uid)">
                {{ detail.cuser_name }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="合同租赁数">
              {{ (detail.lease_area || "0") + detail.lease_square_unit }}
            </a-descriptions-item>
            <a-descriptions-item label="招商人员">
              <span :class="detail?.business_info?.customer_team_user?.uid ? 'link' : ''" @click="showUserInfo(detail?.business_info?.customer_team_user?.uid)">
                {{ detail?.business_info?.customer_team_user?.name || '--' }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="渠道人员">
              <span :class="detail?.business_info?.customer_channel_user?.id ? 'link' : ''" @click="showChannelDetail(detail?.business_info?.customer_channel_user?.id)">
                {{ detail?.business_info?.customer_channel_user?.name || '--' }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="所属公司">
              <span :class="detail?.org_branch_id ? 'link' : ''" @click.stop="showCompany(detail.org_branch_id)">
                {{ detail?.company_branch_name || '--' }}
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="签订日">
              {{ detail.sign_time }}
            </a-descriptions-item>
            <a-descriptions-item label="开始日">
              {{ detail.lease_starttime }}
            </a-descriptions-item>
            <a-descriptions-item label="结束日">
              {{ detail.lease_endtime }}
            </a-descriptions-item>
            <!-- detail.proprietor_id :成本合同有业主信息-->
            <a-descriptions-item label="退租日" v-if="!detail.proprietor_id">
              {{ detail.retreat_time || "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="单位保留小数">
              {{ detail.unit_price_point }}位
            </a-descriptions-item>
            <a-descriptions-item label="计算精度">
              {{ detail.calculate_accuracy_unit }}
            </a-descriptions-item>
            <a-descriptions-item label="计算顺序">
              {{ detail.calculate_order_unit }}
            </a-descriptions-item>
            <a-descriptions-item label="应收取到（四舍五入）">
              {{ detail.receivable_round_unit }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="24" class="mt-10">
        <a-card size="small" title="房源信息">
          <checked-build :content="detail.build_bind" />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="12" class="mt-10">
      <a-col :span="24" v-if="detail.owner_info">
        <a-card
          size="small"
          :title="detail.proprietor_id ? '业主信息' : '租客信息'"
        >
          <a-descriptions
            layout="vertical"
            :labelStyle="labelStyle"
            :contentStyle="contentStyle"
            size="small"
            :column="{ xl: 3, md: 2, xs: 1 }"
          >
            <a-descriptions-item label="业主名称" v-if="detail.proprietor_id">
              {{
                detail.proprietor_info && detail.proprietor_info.name
                  ? detail.proprietor_info.name
                  : "-"
              }}
            </a-descriptions-item>
            <a-descriptions-item label="业主联系人" v-if="detail.proprietor_id">
              {{
                detail.proprietor_info && detail.proprietor_info.link_name
                  ? detail.proprietor_info.link_name
                  : "-"
              }}
            </a-descriptions-item>
            <a-descriptions-item label="业主手机号" v-if="detail.proprietor_id">
              {{
                detail.proprietor_info && detail.proprietor_info.phone
                  ? detail.proprietor_info.phone
                  : "-"
              }}
            </a-descriptions-item>
            <a-descriptions-item
              label="业主收款银行"
              v-if="detail.proprietor_id"
            >
              {{
                detail.proprietor_info && detail.proprietor_info.bank_name
                  ? detail.proprietor_info.bank_name
                  : "-"
              }}
            </a-descriptions-item>
            <a-descriptions-item
              label="业主收款账号"
              v-if="detail.proprietor_id"
            >
              {{
                detail.proprietor_info && detail.proprietor_info.bank_account
                  ? detail.proprietor_info.bank_account
                  : "-"
              }}
            </a-descriptions-item>

            <a-descriptions-item label="租客" v-if="!detail.proprietor_id">
              <div class="link" @click="ownerDetail(detail.owner_info)">
                {{ detail.owner_info.owner_name }}
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="行业" v-if="!detail.proprietor_id">
              {{ detail.owner_info.industry_name || "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="法人" v-if="!detail.proprietor_id">
              {{ detail.owner_info.corporation || "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="签订人" v-if="!detail.proprietor_id">
              {{ detail.owner_info.signatory || "--" }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <!-- 意向合同信息 -->
      <a-col :span="24" class="mt-10" v-if="detail.op_type == 5">
        <a-card
          size="small"
          style="height: 100%"
          title="意向信息"
          v-if="detail.purpose_unlock_time"
        >
          <a-descriptions
            layout="vertical"
            :labelStyle="labelStyle"
            :contentStyle="contentStyle"
            size="small"
            :column="{ xl: 3, md: 2, xs: 1 }"
          >
            <a-descriptions-item label="意向金支付金额">
              {{
                detail.purpose_receive_price
                  ? parseInt(detail.purpose_receive_price) ==
                    parseFloat(detail.purpose_receive_price)
                    ? Number(detail.purpose_receive_price) + "元"
                    : Number(detail.purpose_receive_price).toFixed(2) + "元"
                  : "--"
              }}
            </a-descriptions-item>
            <a-descriptions-item label="意向金应付时间">
              {{
                detail.purpose_receive_time
                  ? moment(detail.purpose_receive_time).format("YYYY-MM-DD")
                  : "--"
              }}
            </a-descriptions-item>
            <a-descriptions-item label="意向房屋锁定终止时间">
              {{
                detail.purpose_unlock_time
                  ? moment(detail.purpose_unlock_time).format("YYYY-MM-DD")
                  : "--"
              }}
            </a-descriptions-item>
            <a-descriptions-item label="意向金支付方式">
              {{ detail.purpose_pay_method_txt || "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="意向金类型">
              {{ detail.purpose_is_return ? "意向金" : "定金" }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <!-- 滞纳金信息 -->
      <a-col :span="24" class="mt-10" v-if="!detail.proprietor_id">
        <a-card
          size="small"
          style="height: 100%"
          title="滞纳金信息"
          v-if="detail.late_fee"
        >
          <a-descriptions
            layout="vertical"
            :labelStyle="labelStyle"
            :contentStyle="contentStyle"
            size="small"
            :column="{ xl: 3, md: 2, xs: 1 }"
          >
            <a-descriptions-item label="起算天数">
              {{ detail.late_fee.startDay || "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="滞纳金比例">
              {{ detail.late_fee.ratio || "--" }}
            </a-descriptions-item>
            <a-descriptions-item label="滞纳金上限">
              {{ detail.late_fee.toplimit || "--" }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <!-- 拓展字段 -->
      <a-col :span="24" class="mt-10" v-if="detail.extra_field?.length">
        <a-card size="small" style="height: 100%" title="拓展字段">
          <a-descriptions
            layout="vertical"
            :labelStyle="labelStyle"
            :contentStyle="contentStyle"
            size="small"
            :column="{ xl: 3, md: 2, xs: 1 }"
          >
            <a-descriptions-item
              :label="extraItem.name"
              v-for="(extraItem, index) in detail.extra_field"
              :key="index"
            >
              {{ extraItem.value || "--" }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
    </a-row>
    <a-row class="mt-10">
      <a-col :span="24">
        <a-card
          size="small"
          title="合同标签"
          v-if="detail.contract_tags && detail.contract_tags.length"
        >
          <tag-list :list="detail.contract_tags" :type="2" />
        </a-card>
      </a-col>
    </a-row>

    <a-row
      :wrap="true"
      :gutter="[12, 12]"
      v-if="detail.clauseData && detail.clauseData.length"
    >
      <a-col :span="24" v-for="clause of detail.clauseData" :key="clause.id">
        <a-card size="small">
          <template #title>
            <span>{{ clause.clause_name }}</span>
            <span class="name-remark" v-if="clause.remark_clause">
              （备注：{{ clause.remark_clause }}）
            </span>
          </template>
          <a-card-grid style="width: 50%; min-height: 252px">
            <a-descriptions
              layout="vertical"
              :labelStyle="labelStyle"
              :contentStyle="contentStyle"
              size="small"
              :column="{ md: 2, xs: 1 }"
            >
              <template #title>
                <div class="text-title">基本条款</div>
              </template>
              <a-descriptions-item label="房源信息">
                <a-tooltip>
                  <template #title>
                    {{ getClauseCheckedBuild(clause.checked_build) }}
                  </template>
                  <div class="nowrap">
                    {{ getClauseCheckedBuild(clause.checked_build) }}
                  </div>
                </a-tooltip>
              </a-descriptions-item>
              <a-descriptions-item label="租赁数">
                {{ clause.basic_clause.lease_area || "--" }}
                {{ clause.basic_clause.lease_square_unit }}
              </a-descriptions-item>
              <a-descriptions-item
                label="含税规则"
                v-if="!detail.proprietor_id"
              >
                {{ clause.tax_clause && clause.tax_clause.taxRuleTxt }}
              </a-descriptions-item>
              <a-descriptions-item
                label="税率"
                v-if="!detail.proprietor_id"
              >
                {{clause?.tax_clause?.taxRateTxt || "--"}}
              </a-descriptions-item>
            </a-descriptions>
          </a-card-grid>
          <a-card-grid style="width: 50%; min-height: 252px">
            <a-descriptions
              layout="vertical"
              :labelStyle="labelStyle"
              :contentStyle="contentStyle"
              size="small"
              :column="{ md: 2, xs: 1 }"
            >
              <template #title>
                <div class="text-title">保证金条款</div>
              </template>
              <a-descriptions-item label="保证金类型">
                {{ clause?.bond_clause?.bond_type_txt || "--" }}
              </a-descriptions-item>
              <a-descriptions-item label="保证金金额">
                {{ clause?.bond_clause?.bond_price || "--" }}
                {{ clause?.bond_clause?.bond_unit_txt || "" }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card-grid>
          <a-card-grid style="width: 100%">
            <div class="text-title">
              {{clause.attribute && clause.multiple_clause[0]?.showCostType && clause.multiple_clause[0]?.cost_type_list[0]?.name ? `${clause.multiple_clause[0].cost_type_list[0].name}条款` : clause.attribute == "lease" ? "租赁条款" : "物业费条款"}}
            </div>
            <a-card
              class="inner-card mt-10"
              :bordered="false"
              v-for="(item, index) of formatMultipleClause(
                clause.multiple_clause
              )"
              :key="index"
            >
              <a-descriptions
                layout="vertical"
                :labelStyle="labelStyle"
                :contentStyle="contentStyle"
                size="small"
                :column="{ xxl: 6, xl: 5, lg: 4, md: 3, sm: 2, xs: 1 }"
              >
                <!-- 有业主信息是成本合同,且托管计租 -->
                <template
                  v-if="detail.proprietor_id && detail.lease_mode == 'unit2'"
                >
                  <a-descriptions-item label="计租方式">
                    托管计租
                  </a-descriptions-item>
                  <a-descriptions-item label="费用类型">
                    {{
                      item.cost_type && item.cost_type_list
                        ? checkCostType(item.cost_type, item.cost_type_list)
                        : "--"
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="分成占比">
                    {{ item.divide_rate + "%" }}
                  </a-descriptions-item>
                  <a-descriptions-item label="计算规则" span="2">
                    {{
                      item.cost_compute_rule && item.cost_compute_rule_list
                        ? checkCostType(
                            item.cost_compute_rule,
                            item.cost_compute_rule_list
                          )
                        : "--"
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="付款时间">
                    {{ item.payment_time_unit1_txt + item.payment_time }}
                    {{
                      item.payment_time_unit2_txt
                        ? "（" + item.payment_time_unit2_txt + "）"
                        : ""
                    }}{{
                      item.specify_date_unit_txt
                        ? "（" + item.specify_date_unit_txt + "）"
                        : ""
                    }}
                  </a-descriptions-item>
                </template>
                <template v-else>
                  <a-descriptions-item
                    label="计租方式"
                    v-if="clause.attribute == 'lease'"
                  >
                    {{ item.compute_lease_unit }}
                  </a-descriptions-item>
                  <a-descriptions-item label="开始时间">
                    {{ item?.charge_begintime }}
                  </a-descriptions-item>
                  <a-descriptions-item label="结束时间">
                    {{ item?.charge_endtime }}
                  </a-descriptions-item>
                  <a-descriptions-item label="付款时间">
                    {{ item?.payment_time_unit1_txt }}
                    {{
                      item?.payment_time_unit1 == "unit_3"
                        ? " " + item?.payment_time
                        : item?.payment_time
                    }}
                    {{
                      item?.payment_time_unit2_txt
                        ? "（" + item?.payment_time_unit2_txt + "）"
                        : item?.payment_time_unit1 == "unit_3"
                        ? "日"
                        : ""
                    }}{{
                      item?.specify_date_unit_txt
                        ? "（" + item?.specify_date_unit_txt + "）"
                        : ""
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item label="合同单价">
                    {{
                      ((item?.contract_unit_price || '') + (item?.contract_price_unit_txt || '')) || '--'
                    }}
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span>计费类型</span>
                      <text-tip
                        :tips="[
                          '天平均是指单价最后都换算为天单价计算；月平均：指整月的时间段租金单价按月单价计算，不足整月的按换算的天单价计算。月单价=日单价*年天数/12，天单价=月单价*12/年天数。',
                        ]"
                      />
                    </template>
                    {{ item?.charge_type_txt || "--" }}
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span>租期划分方式</span>
                      <text-tip
                        :tips="[
                          '按起始日划分',
                          '次月按自然月划分(仅一月一付有效)',
                          '按自然月划分(首月非整自然月划入第一期)',
                          '按自然月划分(首月非整自然月算一个月)',
                        ]"
                      />
                    </template>
                    {{ item?.lease_divide_txt || "--" }}
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span>天单价换算规则</span>
                      <text-tip
                        :tips="[
                          '天单价换算规则：按年换算：天单价=月单价*12/年天数',
                          '按自然月换算：天单价=月单价/自然月的天数',
                        ]"
                      />
                    </template>
                    {{ item?.convert_day_price_txt || "--" }}
                  </a-descriptions-item>
                  <a-descriptions-item>
                    <template #label>
                      <span>年天数</span>
                      <text-tip :tips="['一年按多少天计算']" />
                    </template>
                    {{ item?.year_days }}
                  </a-descriptions-item>
                  <a-descriptions-item label="付款周期">
                    {{ item?.payCycle }}月一付
                  </a-descriptions-item>
                  <a-descriptions-item
                    label="区间闭合方式"
                    v-if="
                      item?.divide_mode_unit &&
                      item?.divide_mode_unit != 'unit1'
                    "
                  >
                    {{ item.section_mode_unit_txt }}
                  </a-descriptions-item>
                </template>
              </a-descriptions>
              <a-descriptions
                layout="vertical"
                :labelStyle="labelStyle"
                :contentStyle="contentStyle"
                size="small"
                :column="1"
                v-if="item?.divide_mode && item?.divide_mode.length"
              >
                <a-descriptions-item
                  :label="item.divide_mode_unit_txt + '分成'"
                >
                  <div class="w-100p">
                    <a-row :gutter="24" class="divide-row col-header">
                      <a-col :span="6">
                        营业额大于
                        {{ item.section_mode_unit == "unit2" ? "等于" : "" }}
                      </a-col>
                      <a-col :span="6">
                        营业额小于
                        {{ item.section_mode_unit == "unit1" ? "等于" : "" }}
                      </a-col>
                      <a-col :span="6">分成比例</a-col>
                    </a-row>
                    <a-row
                      :gutter="24"
                      class="divide-row"
                      v-for="(divideItem, divideIndex) of item.divide_mode"
                      :key="divideIndex"
                    >
                      <a-col :span="6">{{ divideItem.minPrice }}</a-col>
                      <a-col :span="6">
                        {{
                          divideItem.maxPrice == -1 ? "∞" : divideItem.maxPrice
                        }}
                      </a-col>
                      <a-col :span="6">{{ divideItem.ratio }}%</a-col>
                    </a-row>
                  </div>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
            <template
              v-if="clause.discount_clause && clause.discount_clause.length"
            >
              <div class="text-title">优惠</div>
              <a-card
                class="inner-card mt-10"
                :bordered="false"
                v-for="(item, index) of clause.discount_clause"
                :key="index"
                :id="item.discount_type"
              >
                <a-descriptions
                  layout="vertical"
                  :labelStyle="labelStyle"
                  :contentStyle="contentStyle"
                  size="small"
                  :column="{ xxl: 6, xl: 5, lg: 4, md: 3, sm: 2, xs: 1 }"
                >
                  <a-descriptions-item label="优惠类型">
                    {{ item.discount_type_txt }}
                  </a-descriptions-item>
                  <a-descriptions-item label="开始时间">
                    {{ item.discount_start_time }}
                  </a-descriptions-item>
                  <a-descriptions-item label="结束时间">
                    {{ item.discount_end_time }}
                  </a-descriptions-item>
                  <a-descriptions-item
                    label="免租期划分方式"
                    v-if="item.exempt_lease_type"
                  >
                    {{ item.exempt_lease_type_txt }}
                  </a-descriptions-item>
                  <template v-else>
                    <a-descriptions-item label="期数">
                      {{ item.stage_start }}
                    </a-descriptions-item>
                    <a-descriptions-item label="期长">
                      {{ item.stage_num }}
                    </a-descriptions-item>
                    <a-descriptions-item :label="item.discount_type_txt">
                      {{ item.discount_num }}
                      {{ item.discount_type == "select_2" ? "折" : "元" }}
                    </a-descriptions-item>
                  </template>
                  <a-descriptions-item label="备注">
                    {{ item.remark }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </template>
            <template
              v-if="clause.increment_clause && clause.increment_clause.length"
            >
              <div class="text-title">
                {{ clause.attribute == "lease" ? "租赁" : "物业费" }}递增率
              </div>
              <a-card
                class="inner-card mt-10"
                :bordered="false"
                v-for="(item, index) of clause.increment_clause"
                :key="index"
              >
                <a-descriptions
                  layout="vertical"
                  :labelStyle="labelStyle"
                  :contentStyle="contentStyle"
                  size="small"
                  :column="{ xxl: 6, xl: 5, lg: 4, md: 3, sm: 2, xs: 1 }"
                >
                  <a-descriptions-item label="递增时间点">
                    {{ item.incrDate }}
                  </a-descriptions-item>
                  <a-descriptions-item label="单价递增">
                    {{ item.incrPrice + item.incrPriceUnit_txt }}
                  </a-descriptions-item>
                  <a-descriptions-item label="保证金递增">
                    {{ item.incrBond + item.incrBondUnit_txt }}
                  </a-descriptions-item>
                </a-descriptions>
              </a-card>
            </template>
          </a-card-grid>
        </a-card>
      </a-col>
    </a-row>
    <a-row class="mt-10" :gutter="[10, 10]">
      <a-col :span="24">
        <a-card title="备注信息" size="small">
          <template #extra>
            <a-button
              @click="addVisible = true"
              v-permission="[
                detail.op_type == 1 ? 'contractList' : 'contractFile',
                'auth',
                'contractContinue',
              ]"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              备注
            </a-button>
          </template>
          <a-table
            :dataSource="remarkList"
            :columns="remarkcols"
            rowKey="id"
            @change="handleRemarkTableChange"
          >
            <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.key === 'operate_content'">
                <span>{{ text.content }}</span>
              </template>
              <template v-if="column.key === 'action'">
                <DeleteOutlined
                  style="color: #f5222d"
                  @click="deleteRemark(record.id)"
                  v-action="['contractList', 'auth', 'contractContinue']"
                />
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <add-remark
      :visible="addVisible"
      :id="detail.id"
      @success="handleRemarkAddSuccess"
      @cancel="addVisible = false"
    />

    <UserDetail
      @request="$utils.commonRequest"
      :visible="userVisible"
      :uid="userId"
      :coordinateData="coordinateData"
      @cancel="userVisible = false"
    />

    <AddCompany
      :visible="addCompanyVisible"
      :id="editCompanyId"
      :isDetail="true"
      @handleCancel="addCompanyVisible = false"
    />

    <!--  渠道详情  -->
    <ChannelDetail
      :visible="channelDetailVisible"
      :id="channelDetailId"
      @closeDrawer="channelDetailVisible = false"
    />

      <!-- 租客详情 -->
      <OwnerDetailDrawer
        :visible="ownerDetailVisible"
        :id="ownerId"
        @cancel="
        () => {
          ownerDetailVisible = false;
        }
      "
    />

  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  watch,
  createVNode,
  computed,
  reactive,
  toRefs,
  nextTick,
  onMounted,
  defineAsyncComponent
} from "vue";
import {
  PlusOutlined,
  CopyOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import request from "../../../common/utils/request";
import store from "../../../store";
import CheckedBuild from "../../../components/contract/CheckedBuild/index.vue";
import TagList from "../../../components/Tag/show.vue";
import AddRemark from "./modules/AddRemark.vue";
import { TextTip, UserDetail } from "bl-common-vue3";
import { Modal, message } from "ant-design-vue";
import moment from "moment";
import AddCompany from "@/views/setting/CompanyInfo/modules/AddCompany.vue";
import ChannelDetail from "@/views/village/BusinessManage/modules/ChannelDetail.vue";
const OwnerDetailDrawer = defineAsyncComponent(() =>
    import("@/views/village/OwnerManage/modules/OwnerDetailDrawer.vue")
);
import utils from "@/common/utils/utils";

export default defineComponent({
  name: "ContractDetailBasicInfo",
  components: {
    AddCompany,
    ChannelDetail,
    CheckedBuild,
    TagList,
    AddRemark,
    PlusOutlined,
    TextTip,
    CopyOutlined,
    DeleteOutlined,
    UserDetail,
    OwnerDetailDrawer,
  },
  props: {
    refresh: {
      type: Number,
      default: 0,
    },
    showType: {
      type: String,
      default: "",
    },
    drawerId: {
      type: [Number, String],
      default: "",
    },
    discountType: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const $route = useRoute();
    const id = computed(() =>
      props.showType === "drawer"
        ? Number(props.drawerId)
        : Number($route.query.id)
    );
    const state = reactive({
      userVisible: false,
      userId: 0,
      coordinateData: {},
      channelDetailVisible: false,
      channelDetailId: 0,
      addCompanyVisible: false,
      editCompanyId: 0,
      ownerDetailVisible: false,
      ownerId: 0
    });
    // 获取详情
    const detail = ref({});
    const getDetail = () => {
      request
        .get("/org", "/create/contractInfo", { id: id.value })
        .then((res) => {
          detail.value = res;
          store.dispatch("SetContractDetail", res);
          store.dispatch(
            "SetContractRetreatAbstract",
            res.retreatLog.retreatAbstract
          );
          getRemarkList();
          nextTick(() => {
            setTimeout(() => {
              scrollToAnchor(props.discountType);
            }, 1000);
          });
        });
    };
    // 获取备注列表
    const remarkList = ref([]);
    const getRemarkList = () => {
      request
        .get("/org", "/contract/operateLogList", {
          page: page.value,
          limit: limit.value,
          log_type: "remark",
          contract_id: detail.value.id,
        })
        .then((res) => {
          remarkList.value = res.data;
          total.value = res.total;
          if (remarkList.value.length) {
            store.dispatch(
              "SetLatestRemark",
              remarkList.value[0].operate_content.content
            );
          } else {
            store.dispatch("SetLatestRemark", "");
          }
        });
    };
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const handleRemarkTableChange = (pager) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
    };
    watch([page, limit], () => {
      getRemarkList();
    });

    // 添加备注
    const addVisible = ref(false);
    const handleRemarkAddSuccess = () => {
      addVisible.value = false;
      page.value = 1;
      getRemarkList();
    };

    // 获取条款所选房源
    const getClauseCheckedBuild = (list) => {
      const arr = list.room.map(
        (item) =>
          `${utils.getBuildNameByBuildBind(item, list)}/${
            item.layer_name
          }/${item.room_name}`
      );
      return arr.join("，");
    };

   

    const init = () => {
      getDetail();
    };

    init();

    const checkCostType = (type, list) => {
      let typeTxt = "";
      if (type && list && list.length > 0) {
        list.map((item) => {
          if (item.key == type) {
            typeTxt = item.name;
          }
        });
      }
      return typeTxt;
    };

    watch(
      () => props.refresh,
      (val) => {
        if (val) {
          getDetail();
        }
      }
    );

    // 针对成本合同，特殊处理
    const formatMultipleClause = (data) => {
      let arr = [];
      if (data && data.length > 0) {
        arr = data;
      } else {
        //console.log(data.contract_unit_price + data.contract_price_unit_txt);
        arr.push(data);
      }
      return arr;
    };

    const deleteRemark = (id) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确认删除该合同备注吗？",
        okText: () => "确定",
        okType: "danger",
        cancelText: () => "取消",
        onOk() {
          if (id) {
            request
              .del("/org", "/contract/operateLogDel", {
                id: id,
                contract_id: detail.value.id,
                log_type: "remark",
              })
              .then((res) => {
                page.value = 1;
                getRemarkList();
                message.success(res.msg || "删除成功");
              });
          }
        },
        onCancel() {},
      });
    };

    const showUserInfo = (uid) => {
      if (!uid) {
        return;
      }
      state.userId = uid;
      state.coordinateData = window.event;
      setTimeout(() => {
        state.userVisible = true;
      }, 50);
    };

    const showCompany = (id) => {
      if (!id) return;
      state.addCompanyVisible = true;
      state.editCompanyId = id;
    };

    const showChannelDetail = (id) => {
      if (!id) {
        return;
      }
      state.channelDetailId = id;
      state.channelDetailVisible = true;
    };

    // 滚动到指定位置
    const scrollToAnchor = (id) => {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    };

     // 租客详情
     const ownerDetail =(data)=>{
      state.ownerId = data.owner_id
      state.ownerDetailVisible = true
     }

    return {
      ...descStyle,
      remarkcols,
      detail,
      remarkList,
      addVisible,
      page,
      ...toRefs(state),
      handleRemarkTableChange,
      handleRemarkAddSuccess,
      getClauseCheckedBuild,
      formatMultipleClause,
      checkCostType,
      deleteRemark,
      moment,
      showUserInfo,
      scrollToAnchor,
      showCompany,
      showChannelDetail,
      ownerDetail
    };
  },
});
const descStyle = {
  labelStyle: {
    color: "rgba(0,0,0,0.5)",
    fontSize: "12px",
  },
  contentStyle: {
    color: "rgba(0,0,0,0.8)",
    marginBottom: "15px",
    overflow: "hidden",
    paddingRight: "8px",
  },
};
const remarkcols = [
  { title: "操作人", dataIndex: "operate_user", key: "operate_user" },
  { title: "操作时间", dataIndex: "operate_time", key: "operate_time" },
  {
    title: "备注内容",
    dataIndex: "operate_content",
    key: "operate_content",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
  },
];
</script>

<style lang="less" scoped>
.inner-card {
  padding: 20px 10px 0 10px;
  background: @primary-color-bg;
  .divide-row {
    width: 100%;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
  }
  .col-header {
    font-weight: bold;
  }
}
.name-remark {
  color: rgba(0, 0, 0, 0.4);
  margin-left: 8px;
  font-size: 12px;
}
</style>
